<template>
  <!--表格-->
  <table class="table">
    <thead>
      <tr>
        <th colspan="2">查询结果</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="left">手机号码段：</td>
        <td class="right">{{ phoneStore.phoneNum }}</td>
      </tr>
      <tr class="gray">
        <td class="left">卡号归属地省份：</td>
        <td class="right">{{ phoneStore.phoneData.province }}</td>
      </tr>
      <tr class="gray">
        <td class="left">卡号归属地城市：</td>
        <td class="right">{{ phoneStore.phoneData.city }}</td>
      </tr>
      <tr>
        <td class="left">运营商：</td>
        <td class="right">{{ phoneStore.phoneData.company }}</td>
      </tr>
      <tr class="gray">
        <td class="left">区号：</td>
        <td class="right">{{ phoneStore.phoneData.areacode}}</td>
      </tr>
      <tr>
        <td class="left">邮编：</td>
        <td class="right">{{ phoneStore.phoneData.zip }}</td>
      </tr>
      <tr class="gray">
        <td colspan="2">号码归属地数据由聚合数据提供</td>
      </tr>
    </tbody>
  </table>
</template>

<script setup lang="ts">

import usePhoneStore from '@/stores/phone';
import { reactive, watch } from 'vue';

const phoneStore = reactive(usePhoneStore()) 
console.log(phoneStore);

//  watch(phoneStore,()=>{

//  })

    
</script>

<style scoped>
.table {
  width: 95%;
  margin: 10px;
  text-align: center;
  font-size: 14px;
  color: #666;
}

.table tr.gray {
  background-color: #eee;
}

.table th {
  color: #444;
  background-color: #eee;
  height: 35px;
  line-height: 35px;
}

.table td {
  height: 35px;
  line-height: 35px;
  padding-right: 5px;
}

.table td.left {
  text-align: right;
  width: 35%;
}

.table td.right {
  padding-left: 5px;
  width: 65%;
  text-align: left;
}
</style>